import styled from 'styled-components'
import Icon from '@/components/Icon'

interface IconChairmanAvatarProps {
	hasChairman: boolean
	isOnline: boolean
}
export const IconChairmanAvatar = styled(Icon).attrs<IconChairmanAvatarProps>(({ hasChairman, isOnline }) => {
	if (hasChairman) {
		return { className: `${isOnline ? 'online' : 'offline'}` }
	} else {
		return { className: `` }
	}
})<IconChairmanAvatarProps>`
	width: 34px;
	height: 34px;
	background-position: 0 -1343px;
	&.online {
		background-position: -68px -1343px;
	}
	&.offline {
		background-position: -102px -1343px;
	}
`
interface IconSpeakerAvatarProps {
	hasSpeaker: boolean
	isOnline: boolean
}
export const IconSpeakerAvatar = styled(Icon).attrs<IconSpeakerAvatarProps>(({ hasSpeaker, isOnline }) => {
	if (hasSpeaker) {
		return { className: `${isOnline ? 'online' : 'offline'}` }
	} else {
		return { className: `` }
	}
})<IconSpeakerAvatarProps>`
	width: 34px;
	height: 34px;
	background-position: -34px -1343px;
	&.online {
		background-position: -136px -1343px;
	}
	&.offline {
		background-position: -169px -1343px;
	}
`
export const IconCancelChairman = styled(Icon)`
	width: 24px;
	height: 24px;
	background-position: 0px -2412px;
	&:hover {
		background-position: -24px -2412px;
	}
	&:active {
		background-position: -48px -2412px;
	}
`
export const IconChairmanPoll = styled(Icon)`
	width: 24px;
	height: 24px;
	background-position: -192px -2412px;
	&:hover {
		background-position: -216px -2412px;
	}
	&:active {
		background-position: -240px -2412px;
	}
`
export const IconMtVmp = styled(Icon)`
	width: 24px;
	height: 24px;
	background-position: -480px -2412px;
	&:hover {
		background-position: -504px -2412px;
	}
	&:active {
		background-position: -528px -2412px;
	}
`
export const IconChairmanSelectView = styled(Icon)`
	width: 24px;
	height: 24px;
	background-position: -576px -2412px;
	&:hover {
		background-position: -600px -2412px;
	}
	&:active {
		background-position: -624px -2412px;
	}
`
export const IconCancelChairmanSelectView = styled(Icon)`
	width: 24px;
	height: 24px;
	background-position: -672px -2412px;
	&:hover {
		background-position: -696px -2412px;
	}
	&:active {
		background-position: -720px -2412px;
	}
`
export const IconCancelSpeaker = styled(Icon)`
	width: 24px;
	height: 24px;
	background-position: -96px -2412px;
	&:hover {
		background-position: -120px -2412px;
	}
	&:active {
		background-position: -144px -2412px;
	}
`
export const IconDoubleFlow = styled(Icon)`
	width: 24px;
	height: 24px;
	background-position: -288px -2412px;
	&:hover {
		background-position: -312px -2412px;
	}
	&:active {
		background-position: -336px -2412px;
	}
`
export const IconCancelDoubleFlow = styled(Icon)`
	width: 24px;
	height: 24px;
	background-position: -384px -2412px;
	&:hover {
		background-position: -408px -2412px;
	}
	&:active {
		background-position: -432px -2412px;
	}
`
export const IconsWrap = styled.div`
	.action-icons {
		display: flex;
		margin-left: 15px;
		.icon {
			margin-right: 4px;
		}
	}
`
export const Wrap = styled.div`
	display: flex;
	align-items: start;
	justify-content: center;
	margin-bottom: 13px;
`
export const ManagerWrap = styled.div`
	width: 238px;
	&:nth-of-type(1) {
		margin-right: 13px;
	}
	.manager-wrap__top {
		display: flex;
		align-items: center;
		margin-left: 56px;
		margin-bottom: 5px;
		.manager-avatar {
			cursor: default;
		}
	}
	.manager-name {
		max-width: 150px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 14px;
		text-align: center;
		color: #2c8dc5;
		cursor: default;
	}
	.no-action-tips {
		font-size: 14px;
		color: #4e4e4e;
		cursor: default;
		margin-left: 10px;
	}
	.no-name-tips {
		font-size: 14px;
		text-align: center;
		color: #4e4e4e;
		opacity: 0.5;
		cursor: default;
	}
`
